<template>
	<!-- 地区资金 -->
	<view>

		<!-- 顶部下拉 -->
		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				height="100" :border-bottom="true" @open="opens" @close="closes">
				<u-dropdown-item v-for="(c,i) in list" :key="i" :title="c.time" :options="c.options">


					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==0">

						<view class="arrow-down-fill-one">
							<view class="arrow-down-fill-one-top">
								<view>
									<view>

									</view>
									<view v-for="(c,i) in topList.nian" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
								<view>
									<view>
									</view>
									<view v-for="(c,i) in topList.yue" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
								<view>
									<view>
									</view>
									<view v-for="(c,i) in topList.ri" :key="i" v-if="c.fel==true">
										{{c.text}}
									</view>
									<view>
										<u-icon name="arrow-down" colo="#ccc"></u-icon>
									</view>
								</view>
							</view>

							<view class="arrow-down-fill-one-center">
								<view>
									<view v-for="(c,i) in topList.nian" :key="i" :class="{'class-BGC':c.fel}"
										@click="nianCLICK(i)">
										{{c.text}}

									</view>
								</view>
								<view>
									<view v-for="(c,i) in topList.yue" :key="i" :class="{'class-BGC':c.fel}"
										@click="yueCLICK(i)">
										{{c.text}}

									</view>
								</view>
								<view>
									<view v-for="(c,i) in topList.ri" :key="i" :class="{'class-BGC':c.fel}"
										@click="riCLICK(i)">
										{{c.text}}

									</view>
								</view>



							</view>

						</view>
					</view>

					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==1||2||3">
						<view class="arrow-down-fill-san">
							<view v-for="(cc,ii) in c.options" :key="ii" @click="kjClick(ii)" :class="{'class-BGC':cc.fel==true}">
								{{cc.label}}
							</view>
						</view>
					</view>
					
					
					
					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==4">
						<view class="arrow-down-fill-tow">
							<view>
								<view>
									<u-icon name="search" size="28"></u-icon>
								</view>
								<view>
									<input type="text" value=""  v-model="input1" @input="change1"/>
								</view>
							</view>
					
							<view>
								<view v-for="(cc,ii) in DQ" :key="ii" :class="cc.fel==true?'ct':''"
									@click="getBlocAreasClick(ii,i)">
									{{cc.label}}
								</view>
							</view>
						</view>
					</view>
					
					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==5">
						<view class="arrow-down-fill-tow">
							<view>
								<view>
									<u-icon name="search" size="28"></u-icon>
								</view>
								<view>
									<input type="text" value=""  v-model="input2" @input="change2"/>
								</view>
							</view>
					
							<view>
								<view v-for="(cc,ii) in YH" :key="ii" :class="cc.fel==true?'ct':''"
									@click="getBlocBanksClick(ii,i)">
									{{cc.label}}
								</view>
							</view>
						</view>
					</view>
					
					
					
					
					
					

				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 顶部下拉 -->

		<!-- 中部 -->
		<view class="center-list">
			<view>
				地区资金余额
			</view>
			<view>
				50.06亿元
			</view>
			<view>
				（Ⅰ类&Ⅱ类余额合计：39.64亿）
			</view>
		</view>
		<!-- 中部 -->

		<!-- echarts图表循环 -->

		<view class="footer-list">
			<view class="footer-list-s" v-for="(c,i) in keylist" :key="i">
				<view class="footer-list-s-header" @click="regionalClick(i)">
					<view>
						<image src="../index/imgs/financing/zuo1.png" mode=""></image>
					</view>
					<view>
						{{c.title}}
					</view>
					<view>
						<image src="../index/imgs/financing/you1.png" mode=""></image>
					</view>
				</view>
				<view class="footer-list-s-center">
					<view :class="c.class">

						<qiun-data-charts :type="c.ss" :chartData="c.chartData" :errorShow="false" :echartsApp="true"
							:inScrollView="true" :disableScroll="true" background="none" :opts="c.list" />
						<!-- chartDatas -->
						<!-- listsd -->

					</view>
				</view>
			</view>
		</view>
		<!-- echarts图表循环 -->
		<view class="footer-footer">
			<view class="footer-footer-header">
				<view>明细表</view>
				<view>（单位：亿元）</view>
				<view>
					<i class="el-icon-crop"></i>
				</view>
			</view>
			<view class="footer-footer-header-bottom">

				<view>
					<view v-for="(c,i) in footerList" :key="i">
						{{c}}
					</view>
				</view>


				<view>
					<view v-for="(c,i) in footerListd" :key="i" @click="optionList(i)">
						<view>
							{{c.dq}}
						</view>
						<view>
							<u-icon name="arrow-down-fill" color="#ccc" size="5"></u-icon>
						</view>

					</view>
				</view>

			</view>
		</view>
		<view class="footeraaaaaaaaaaa">
			<el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="tableHeaderColor">
				<el-table-column prop="AREA_ORG_NAME" label="地区" width="50">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column prop="BANK" label="-" width="60">
				</el-table-column>
				<el-table-column width="120" prop="TOTAL_VALUE" label="金额">
				</el-table-column>
			</el-table>
		</view>
	</view>
</template>

<script>
	
	import echarts from './uechartsList/list.js'
	import {
		// 下拉内容
		selectareafundldrinfo,
		selectareafundcategoryinfo,
		selectareafundcurrencyinfo,
		selectareafundareainfo,
		selectareafundbankinfo,
		// 图表
		areafundoverview,
		selectareafundchannel,
		selectareafundbank,
		selectareafundtrend,
		
		
		
	} from '../../network/page/regional.js'
	export default {
		data() {
			return {
				list: [{
						time: "时间",
						fel: false,
						options: []
					},
					{
						time: "口径",
						fel: false,
						options: []
					},
					{
						time: "类别",
						fel: false,
						options: []
					},
					{
						time: "币种",
						fel: false,
						options: []
					},
					{
						time: "地区",
						fel: false,
						options: []
					},
					{
						time: "银行",
						fel: false,
						options: []
					}

				],
				keylist: [{
						title: '地区资金总览表',
						list: echarts.OTecharts,
						chartData: echarts.OTchartData,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '地区资金航道分布',
						list: echarts.OTecharts,
						chartData: echarts.OTchartData1,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '地区资金银行分布',
						list: echarts.OTecharts,
						chartData: echarts.OTchartData2,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '地区资金趋势分布',
						list: echarts.Fecharts,
						chartData: echarts.FchartData,
						ss: 'line',
						class: 'charts-boxs'
					}

				],
				echarts: echarts,
				footerList: [],
				topList: {
					nian: [{
							text: '2017年',
							fel: false
						},
						{
							text: '2018年',
							fel: false
						},
						{
							text: '2019年',
							fel: false
						},
						{
							text: '2020年',
							fel: false
						},
						{
							text: '2021年',
							fel: true
						}
					],
					yue: [{
							text: '1月',
							fel: false
						},
						{
							text: '2月',
							fel: false
						},
						{
							text: '3月',
							fel: false
						},
						{
							text: '4月',
							fel: false
						},
						{
							text: '5月',
							fel: false
						},
						{
							text: '6月',
							fel: true
						},
						{
							text: '7月',
							fel: false
						},
						{
							text: '8月',
							fel: false
						},
						{
							text: '9月',
							fel: false
						},
						{
							text: '10月',
							fel: false
						},
						{
							text: '11月',
							fel: false
						},
						{
							text: '12月',
							fel: false
						}

					],
					ri: []
				},
				tableData: [{
						AREA_ORG_NAME: '合计',
						TOTAL_VALUE: '100'

					},
					{
						AREA_ORG_NAME: '重庆',
						TOTAL_VALUE: '20'

					}
				],
				footerListd: [{
						dq: '地区',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '-',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '-',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '-',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					}
				],
				KJ: [],
				LB: [],
				BZ: [],
				DQ: [],
				YH: [],
				input2:'',
				input1:'',
				DataList: {
					nian: '2021',
					yue: '6',
					ri: ''
				},
				thisGetBlocAreas:[],
				thisGetBlocAreass:[],
				index:''

			}
		},
		mounted() {
			this.set()
			// 下拉内容
			selectareafundldrinfo().then(res => {
				// 下拉口径
				// KOUJING_FLAG: "A"
				// KOUJING_NAME: "自有口径"

				let KJs = []
				res.data.data.forEach(res => {
					var obj = {
						label: res.KOUJING_NAME,
						value: res.KOUJING_FLAG,
					}
					KJs.push(obj)
				})
				this.list[1].options = KJs
			})
			selectareafundcategoryinfo().then(res => {
				// 下拉框类别
				let LBs = []
				res.data.data.forEach(res => {
					var obj = {
						label: res.CATEGORY,
						fel: false,
					}
					LBs.push(obj)
				})

				this.list[2].options = LBs
			})
			selectareafundcurrencyinfo().then(res => {
				// 币种

				let BZs = []
				res.data.data.forEach(res => {
					var obj = {
						label: res.CURRENCY_NAME,
						fel: false,
					}
					BZs.push(obj)
				})
				this.list[3].options = BZs
			})
			selectareafundareainfo().then(res => {
				// 地区
				
				let DQs = []
				res.data.data.forEach(res => {
					var obj = {
						label: res.AREA_ORG_NAME,
						fel: false,
					}
					DQs.push(obj)
				})
				
				this.DQ = DQs
				this.thisGetBlocAreass=DQs
				// console.log('// 地区')
			})
			selectareafundbankinfo().then(res => {
				// 银行
				
				let YHs = []
				res.data.data.forEach(res => {
					var obj = {
						label: res.BANK,
						fel: false,
					}
					YHs.push(obj)
				})
				this.YH = YHs
				this.thisGetBlocAreas=YHs
				// console.log('// 银行')
			})
			// 下拉内容
			
			// echarts图表1
			areafundoverview({
				day:'2019-07-27',
				koujing:'A',
				category:'Ⅰ类',
				currencyName:'人民币',
				area:'福州',
				bank:'建行',
				
			}).then(res=>{
				
				var view1=[]
				
				res.data.data.listecharts.forEach(res=>{
					var obj= {
				     "name": res.CATEGORY,
				     "value": res.F_VALUE,
					 "label":false
				         }
				view1.push(obj)
				})
				
			this.keylist[0].chartData.series[0].data=view1

				console.log(1)
				console.log(res.data.data)
				console.log(1)
			})
			
			selectareafundchannel({
				day:'2019-07-27',
				koujing:'A',
				category:'Ⅰ类',
				currencyName:'人民币',
				area:'福州',
				bank:'建行',
			}).then(res=>{
				var view1=[]
					res.data.data.listecharts.forEach(res=>{
						var obj= {
					     "name": res.ACC_BELONG,
					     "value": res.F_VALUE,
						 "label":false
					         }
					view1.push(obj)
					})
					
				this.keylist[1].chartData.series[0].data=view1
				console.log(2)
				console.log(res.data.data)
				console.log(2)
			})
			
			selectareafundbank({
				day:'2019-07-27',
				koujing:'A',
				category:'Ⅰ类',
				currencyName:'人民币',
				area:'福州',
				bank:'建行',
			}).then(res=>{
				
				var view1=[]
					res.data.data.listecharts.forEach(res=>{
						var obj= {
					     "name": res.BANK,
					     "value": res.F_VALUE,
						 "label":false
					         }
					view1.push(obj)
					})
					
				this.keylist[2].chartData.series[0].data=view1
				console.log(3)
				console.log(res.data.data)
				console.log(3)
				
			})
			
			
			
			selectareafundtrend({
				startTime:'2019-06-01',
				endTime:"2021-06-30",
				koujing:'A',
				category:'Ⅰ类',
				currencyName:'人民币',
				area:'福州',
				bank:'建行',
			}).then(res=>{
				let DAY_MONTH=[]
				let A=[]
				let B=[]
				let C=[]
				let D=[]
				let E=[]
				res.data.data.listecharts.forEach((res,i)=>{
					if(i<=4){
						DAY_MONTH.push(res.DAY_MONTH)  //天数
						A.push(res.Ⅰ类)
						B.push(res.Ⅱ类)
						C.push(res.Ⅲ类)
						D.push(res.Ⅳ类)
						E.push(res.Ⅴ类)
					}
				
				})
				
				this.keylist[3].chartData.categories=DAY_MONTH
				this.keylist[3].chartData.series[0].data=A
				this.keylist[3].chartData.series[1].data=B
				this.keylist[3].chartData.series[2].data=C
				this.keylist[3].chartData.series[3].data=D
				this.keylist[3].chartData.series[4].data=E
				
				
				console.log(4)
				console.log(res.data.data)
				console.log(4)
			})
			
			
			
			// echarts图表4
			
			
			
			
			
			
			
			
			
		},
		methods: {
			kjClick(i){
				// this.list[this.index].options[i]
				console.log(this.list[this.index].options[i])
				this.list[this.index].options.forEach(res=>{
					res.fel=false
				})
				this.list[this.index].options[i].fel=!this.list[this.index].options[i].fel
				
			},
			opens(i){
				this.index=i
				console.log(i)
			
			},
			closes(i){
				if(i==0){
						let ris;
						if(this.DataList.ri.length<2){
							ris=`0${this.DataList.ri}`
						}else{
							ris=this.DataList.ri
						}
						let yues;
						if(this.DataList.yue.length<2){
							yues=`0${this.DataList.yue}`
						}else{
							yues=this.DataList.yue
						}
						let riqi=`${this.DataList.nian}-${yues}-${ris}`
						this.list[i].time=riqi
				}
			},
			change2(){
				// getBlocAreas
				if(this.input2.length==0){
					this.YH=this.thisGetBlocAreas
					
				}else{
					var l=[]
					this.YH.forEach(res=>{
						if(res.label.includes(this.input2)){
							l.push(res)
						}
					})
					l.forEach(res=>{
						res.fel=false
					})
						this.YH=l
				}
			},
			change1(){
				// getBlocBanks
				if(this.input1.length==0){
					this.DQ=this.thisGetBlocAreass
					
				}else{
					var l=[]
					this.DQ.forEach(res=>{
						if(res.label.includes(this.input1)){
							l.push(res)
						}
					})
					l.forEach(res=>{
						res.fel=false
					})
						this.DQ=l
				}
			},
			nianCLICK(i) {
				this.topList.nian.forEach(res => {
					res.fel = false
				})
				this.topList.nian[i].fel = true
				let s = this.topList.nian[i].text.split('年')
				this.DataList.nian = s[0]
				this.set()
			},
			yueCLICK(i) {
			
				this.topList.yue.forEach(res => {
					res.fel = false
				})
				let ss = this.topList.yue[i].text.split('月')
				this.DataList.yue = ss[0]
				this.topList.yue[i].fel = true
				this.set()
			
			},
			riCLICK(i) {
				this.topList.ri.forEach(res => {
					res.fel = false
				})
				let sss = this.topList.ri[i].text.split('日')
				this.DataList.ri = sss[0]
				this.topList.ri[i].fel = true
			
			
			},
			set() {
				this.DataList.ri = (new Date(this.DataList.nian, this.DataList.yue, 0)).getDate()
			
				let ls = []
				for (let index = 0; index < this.DataList.ri; index++) {
					ls.push({
						fel: false,
						text: (index + 1) + '日'
					})
					// console.log(index+1)
				}
				ls[10].fel = true
				this.topList.ri = ls
			},
			getBlocAreasClick(ii) {
				this.DQ.forEach(res => {
					res.fel = false
				})
				this.DQ[ii].fel = !this.DQ[ii].fel
			},
			getBlocBanksClick(ii) {
				this.YH.forEach(res => {
					res.fel = false
				})
				this.YH[ii].fel = !this.YH[ii].fel
			
			},
			cellStyle(row, column, rowIndex, columnIndex) {
				return 'background:#F7F7F7'
			},
			tableHeaderColor(row) {
				return 'background:#F7F7F7'
			},
			regionalClick(i) {
				if (i == 0) {
					uni.navigateTo({
						url: './regional/regional'
					})
				}
				if (i == 1) {
					uni.navigateTo({
						url: './regional2/regional2'
					})
				}
				if (i == 2) {
					uni.navigateTo({
						url: './regional3/regional3'
					})
				}
				if (i == 3) {
					uni.navigateTo({
						url: './regional4/regional4'
					})
				}
			}
		},

	}
</script>






<style scoped src="../css/css1-10/sanAllcss/sanAllcss.min.css"></style>
<style scoped src="./uechartsList/css/li.min.css"> </style>
<style scoped src="../css/css1-10/endTime/endTime.min.css"></style>



<style lang="scss" scoped>
	.class-BGC {
		background-color: #06AFB2;
		color: #fff;
	}
	
	.arrow-down-fill-tow {
		width: 100vw;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		>view:nth-child(1) {
			margin-top: 79upx;
			width: 202upx;
			height: 53upx;
			border: 2upx solid #06AFB2;
			border-radius: 5upx;
			margin-bottom: 35upx;
			display: flex;
			align-items: center;
	
			>view:nth-child(1) {
				margin-left: 10upx;
			}
		}
	
		>view:nth-child(2) {
			width: 202upx;
			height: 340upx;
			border: 2upx solid #06AFB2;
			border-radius: 5upx;
			margin-bottom: 41upx;
			overflow: hidden auto;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.ct {
				background-color: #4DD2D1;
			}
	
			>view {
				width: 100%;
				font-size: 12upx;
				padding: 15upx 0;
				display: flex;
				justify-content: center;
	
			}
		}
	
	}

	.arrow-down-fill-san {
		width: 100vw;
		overflow: hidden;
		font-size: 20upx;

		>view {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 30upx 0;
			padding: 10upx 0;
		}
	}
</style>
